<template>
  <div class="app">
    <ListPage :records="records" @search="searchResult"></ListPage>
    <DetailPage></DetailPage>
  </div>
</template>

<script>
import ListPage from "./components/ListPage.vue";
import DetailPage from "./components/DetailPage.vue";
export default {
  components: {
    ListPage,
    DetailPage,
  },
  data() {
    return {
      records: [
        {
          date: "2022-01-01",
          doctor: "张三",
          diagnosis: "感冒",
          prescription: "感冒药",
        },
        {
          date: "2022-02-01",
          doctor: "李四",
          diagnosis: "头疼",
          prescription: "止疼药",
        },
        {
          date: "2022-03-01",
          doctor: "王五",
          diagnosis: "腰痛",
          prescription: "止痛贴",
        },
      ],
    };
  },
  methods:{
    searchResult(value){
      // ! 接收子传父的数据，重新修改数组中的数据
      const newList = this.records.find(item => item.doctor === value)
      this.records = [newList]
    },
 
  }
};
</script>

<style>
</style>